<template>
  <SplitLayout>
    <div slot="top" class="header-top">
      <SearchForm @query="onQuery" @reset="onResetForm" style="margin:20px 0 0 20px;">
        <SearchFormItem label="下载账号：">
          <a-input v-model="pageFilter.operatingName" placeholder="请输入下载账号" />
        </SearchFormItem>
      </SearchForm>
    </div>
    <div class="con-content">
      <div class="con-content-list">
        <CustomTable
          ref="table"
          :showAlert="false"
          :columns="columns"
          :loading="loading"
          :dataSource="pageData"
          :showSelection="false"
          @change="onTableChange"
          rowKey="id"
        >
          <template slot="latestSourceFlag" slot-scope="text">
            <span v-if="text == 1">国家中心</span>
            <span v-if="text == 2">公安导入</span>
            <span v-if="text == 6">吉林省反炸专业平台</span>
          </template>
        </CustomTable>
      </div>
    </div>
  </SplitLayout>
</template>
<script>
import SearchForm from '@/components/zxd/SearchForm'
const SearchFormItem = SearchForm.Item
import { SplitLayout } from '@/components/zxd/layouts'
import CustomTable from '@/components/zxd/Table/CustomTable'
import { listToolDownload } from '@/api/modules/feedbackManagement.js'
export default {
  components: {
    SearchForm,
    SearchFormItem,
    CustomTable,
    SplitLayout
  },
  data() {
    return {
      pageData: [],
      loading: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          width: 100,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '下载账号',
          dataIndex: 'operatingName',
          align: 'center',
          scopedSlots: { customRender: 'szWebsite' }
        },
        {
          title: '下载时间',
          dataIndex: 'downloadTime',
          align: 'center'
        }
      ],
      pageFilter: {
        pageNo: 1, // 当前页数
        pageSize: 10 // 每页显示几条数据
      }
    }
  },
  mounted() {
    this.refreshTable()
  },
  methods: {
    refreshTable() {
      this.loading = true
      listToolDownload(this.pageFilter)
        .then(res => {
          if (res.success) {
            this.pageData = res.result
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.loading = false
        })
    },
    onQuery() {
      this.$refs.table.onClearRowKeys()
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.$refs.table.onClearRowKeys()
      this.rangeTime = undefined
      this.pageFilter = {
        pageNo: 1, // 当前页数
        pageSize: 10 // 每页显示几条数据
      }
      this.refreshTable()
    },
    onTableChange(obj) {
      // console.log(obj.sortField)
      // console.log(obj.sortOrder)
      // if (obj.sortField == 'warningTotal') {
      //   if (obj.sortOrder == 'ascend') {
      //     this.pageFilter.sort = 'asc'
      //   } else {
      //     this.pageFilter.sort = 'desc'
      //   }
      // }
      this.pageFilter.pageNo = obj.currentPage
      this.pageFilter.pageSize = obj.pageSize
      this.refreshTable()
    }
  }
}
</script>
<style scoped lang="less">
.con-content-top {
  margin-bottom: 20px;
}
/deep/#advance-btn {
  display: none;
}
.con-content-top button {
  margin-right: 15px;
}

.zt {
  display: inline-block;
  width: 70px !important;
  padding: 2px 0;
  border-radius: 5px;
  color: #fff;
}
.zt1 {
  color: #3fb674;
  background-color: #e4fff0;
}
.zt2 {
  color: #56acf2;
  background-color: #dceefd;
}
.zt3 {
  color: #f9b01e;
  background-color: #fef3dc;
}
.zt4 {
  color: #fd586c;
  background-color: #ffe9e7;
}
.zt5 {
  color: #b40aba;
  background-color: #fecdff;
}
// .zt4 {
//   color: #d9001b;
//   border: 1px solid #d9001b;
//   text-align: center;
// }
// .zt5 {
//   color: #999;
//   border: 1px solid #999;
//   text-align: center;
// }
/deep/ .ant-tag {
  width: 6vw;
  text-align: center;
}

/deep/ .ant-tag {
  margin-top: 10px;
}
/deep/ .tagItem:nth-child(n + 5) {
  display: none;
}
.icon {
  position: absolute;
  right: 0;
  top: 24px;
}
/deep/ .ant-table td {
  position: relative;
  .t0 {
    position: absolute;
    top: 16px;
    left: 34.2%;
    color: #1890ff;
  }
}
.table_box {
  width: 900px;
  tr {
    .t1 {
      min-width: 10vh;
    }
    .t2 {
      width: 30vh;
      text-align: left;
    }
  }
  tr:nth-child(1) {
    .t2:nth-child(2) {
      color: #d9001b;
    }
  }
}
</style>
